<template>
    <div class="search">
        <div class="search-btn">
            <el-button @click="search">拉框搜索</el-button>
        </div>
        <div class="search-table" v-show="tableData.length > 0">
            <el-table :data="tableData" style="width: 100%" @row-click="rowClick">
                <el-table-column prop="event_num" label="事件编号" />
                <el-table-column prop="level" label="事故级别" />
                <el-table-column prop="area" label="事故区域" />
                <el-table-column prop="name" label="事故类型" />
                <el-table-column prop="car_num" label="车牌号码" />
                <el-table-column prop="phone" label="联系电话" />
            </el-table>
        </div>
    </div>
</template>

<script setup>
import { getWuhanEvents } from "@/api";
import { ref, inject, onMounted, onBeforeUnmount } from "vue";
import { DrawRect } from "@antv/l7-draw";
import { pointsWithinPolygon } from "@turf/turf";
import { PointLayer } from "@antv/l7";
const eventData = ref([]); //所有的事故点数据
const tableData = ref([]); //拉框查询到的数据
const { map, scene } = inject("mapScene");
let draw, pointLayer;
onMounted(async () => {
    map.flyTo({
        center: [114.406325, 30.465113],
        zoom: 15,
        pitch: 45,
    });
    const { data: result } = await getWuhanEvents();
    eventData.value = result;
});
function search() {
    //添加一个交互式画笔
    if (draw) {
        draw.clear();
        draw.destroy();
        draw = null;
    }
    //清除之前所有的点图层
    if (pointLayer) {
        scene.removeAllLayer();
        pointLayer = null;
    }
    draw = new DrawRect(scene, {});
    draw.enable();
    draw.on("add", function (e) {
        pointLayer = new PointLayer({
            name: "事故点",
        });
        //借助turf进行拉框查询 pointsWithinPolygon()
        let result = pointsWithinPolygon(eventData.value, e);
        //要将result展示到点图层和table表格中
        pointLayer
            .source(result)
            .shape("circle")
            .size(30)
            .color("pink")
            .active(true)
            .animate(true);
        scene.addLayer(pointLayer);
        tableData.value = result.features.map((item) => {
            return {
                center: item.geometry.coordinates,
                ...item.properties,
            };
        });
    });
}
function rowClick(row) {
    if (draw) {
        draw.destroy();
        draw.clear();
        draw = null;
    }
    let center = row.center;
    map.flyTo({
        center,
        zoom: 12,
        pitch: 0,
    });
}
onBeforeUnmount(() => {
    if (pointLayer) {
        scene.removeLayer(pointLayer);
    }
    if (draw) {
        draw.destroy();
        draw.clear();
        draw = null;
    }
});
</script>

<style lang="scss" scoped>
.search {
    .search-btn {
        position: fixed;
        top: 200px;
        right: 60px;
    }

    .search-table {
        position: fixed;
        width: 60%;
        left: 20%;
        bottom: 100px;
        z-index: 1000;

        .el-table {
            max-height: 300px;
            overflow-y: scroll;

            :deep(.el-table__cell) {
                background-color: #ccc;
            }

            // 关键：单独设置当前行的高亮样式，优先级更高
            :deep(.el-table__row.current-row .el-table__cell) {
                background-color: #409eff !important;
                /* 蓝色高亮，可自定义 */
                color: white !important;
                /* 文字颜色对比 */
            }
        }
    }
}
</style>
